/*
 * Copyright (C) 2017-2019 Dremio Corporation
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
:global { // DX-11429 TODO reafactor component to use css modules instead fo global classes

    .wrapper-dropdown {
        /* Size & position */
        vertical-align: top;
        position: relative;
        width: auto;
        padding: 8px 15px;
        display: inline-block;
        margin: 5px;

        /* Styles */
        background: #f5f5f5;
        border-radius: 3px;
        
        cursor: pointer;
        border: 1px solid rgba(0,0,0,0.2);
        outline: none;
        transition: all 0.3s ease-out;

        &::after { /* Little arrow */
            content: "";
            width: 0;
            height: 0;
            position: absolute;
            top: 50%;
            right: 10px;
            margin-right: 5px;
            margin-top: -5px;
            border:       solid currentColor;
            border-width: 0 .1em .1em 0;
            display:      inline-block;
            padding:      .20em;
            transform:rotate(45deg);
        }
        .dropdown-text {
            padding: 10px 15px 0px 5px;
            position: relative;
            left: -10px;
        }

        .dropdown {
            /* Size & position */
            position: absolute;
            margin-left: -1px; 
            margin-right: -1px;

            top: 100%;
            width: auto;
            left: 0;
            right: 0;
            margin-top: 0;
            padding-left: 0px; 
            

            /* Styles */
            background-color: #f5f5f5;
            border-radius: 0 0 3px 3px;
            border: 1px solid rgba(0,0,0,0.2);
            border-top: none;
            border-bottom: none;
            list-style: none;
            transition: all 0.3s ease-out;

            /* Hiding */
            max-height: 0;
            overflow: hidden;

            

            li  {
                display: block;
                text-decoration: none;
                color: #333;
                padding: 10px 16px;
                transition: all 0.3s ease-out;
                border-bottom: 1px solid #e6e8ea;


                &:last-of-type  {
                    border: none;
                }

                &:hover  {
                    background-color: rgba(0,0,0, 0.05);
                }
            }
        }

        /* Active state */

        &.active {
            border-radius: 3px 3px 0 0;
            box-shadow: none;
            border-bottom: none;

                
            .dropdown {
                border-bottom: 1px solid rgba(0,0,0,0.2);
                z-index:999999;
                max-height: 400px;
                overflow-y: scroll;
            }
        }
    }
}
